<!--
author:        hejy <silentmanager@163.com>
date:          2024-11-01 00:05:42
component:     index
Copyright © YourCompanyName All rights reserved
套餐上架
-->
<template>
  <div>
    <!-- 表单 -->
    <el-card>
      <FormComponent ref="formRef" :config="formConfig">
        <template #submit>
          <!-- 自定义提交和重置按钮 -->
          <div style="margin-left: 24px">
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
            <el-button
              plain
              type="primary"
              @click="showDialog(MODALTYPE.ADD)"
              v-hasPermi="['bms:package-management:create']"
            >
              <Icon icon="ep:plus" class="mr-5px" />新增</el-button
            >
          </div>
        </template>
      </FormComponent>
    </el-card>
    <!-- 表格 -->
    <el-card style="margin-top: 24px">
      <el-alert :title="'已选择 ' + selectedCount + ' 项'" type="success" />
      <el-table
        v-loading="loading"
        @selection-change="handleSelectionChange"
        :data="list"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 + (queryParams.pageNo - 1) * queryParams.pageSize }}
          </template>
        </el-table-column>
        <el-table-column label="套餐编号" prop="packageCode" />
        <el-table-column label="套餐名称" prop="packageName" />
        <el-table-column label="酒水内容" prop="packageContent">
          <template #default="scope">
            <span
              class="drink_content"
              v-for="(item, index) in scope.row.packageContentList"
              :key="index"
            >
              <span>
                {{ item.drinkName }}
              </span>
              <span> ({{ item.bottleCount }} &times; {{ item.num }}) </span>
              <span> &times; {{ item.packageCount }} </span>
              [<span :class="item.stock > -1 ? 'inventory' : 'no_inventory'">{{ item.stock }}</span
              >]
              <span v-if="index !== scope.row.packageContentList.length - 1">,</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price" />
        <el-table-column label="销售额" prop="packageRevenue" />
        <el-table-column label="瓶数" prop="bottleCount" />
        <el-table-column label="包裹数" prop="packageCount" />
        <el-table-column label="是否上架" prop="isListed">
          <template #default="scope">
            <span>{{ scope.row.isListed ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="奖金栏" prop="bonusRule" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <div style="display: flex">
              <el-button
                link
                type="primary"
                v-hasPermi="['bms:package-management:update']"
                @click="showDialog(MODALTYPE.EMIT, scope.row.id)"
                >编辑</el-button
              >
              <el-button
                v-hasPermi="['bms:package-management:query']"
                link
                type="primary"
                @click="showDialog(MODALTYPE.DETAIL, scope.row.id)"
                >详情</el-button
              >
              <el-button
                link
                v-hasPermi="['bms:package-management:delete']"
                type="danger"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 操作弹窗 -->
    <Operation
      :id="modalId"
      v-model:visible="isDialogVisible"
      :modalType="modalType"
      @refresh-table="getList"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import FormComponent from '@/components/FormComponent/index.vue'
import {
  deletePackageManagement,
  pagePackageManagement,
  PagePackageManagementRes
} from '@/api/drinks/set-menu'
import Operation from './components/operation.vue'

const message = useMessage() // 消息弹窗
import { MODALTYPE } from '@/types/ref'
import { defaultTime } from '@/utils'
// ----------------------------- 操作弹窗状态 -----------------------------
const isDialogVisible = ref<boolean>(false) // 定义对话框可见性的状态
// 显示弹窗的处理函数
const modalType = ref<MODALTYPE>(MODALTYPE.ADD)
const modalId = ref<string>('')
const showDialog = (type: MODALTYPE, id?: string) => {
  isDialogVisible.value = true // 显示弹窗
  modalId.value = id || ''
  modalType.value = type
}
// ==================== 表单  ====================
const formRef = ref<InstanceType<typeof FormComponent>>()

const formConfig = [
  {
    label: '套餐编号',
    prop: 'packageCode',
    type: 'input',
    options: { placeholder: '请输入套餐编号' }
  },
  {
    label: '套餐名称',
    prop: 'packageName',
    type: 'input',
    options: { placeholder: '请输入套餐名称' }
  },
  {
    label: '价格',
    prop: 'price',
    type: 'number',
    options: { placeholder: '请输入价格', style: { width: '200px' } }
  },
  {
    label: '瓶数',
    prop: 'bottleCount',
    type: 'number',
    options: { placeholder: '请输入瓶数', style: { width: '200px' } }
  },
  {
    label: '包裹数',
    prop: 'packageCount',
    type: 'number',
    options: { placeholder: '请输入包裹数', style: { width: '200px' } }
  },
  {
    label: '可用库存',
    prop: 'availableStock',
    type: 'number',
    options: { placeholder: '请输入可用库存', style: { width: '200px' } }
  },
  {
    label: '是否上架',
    prop: 'isListed',
    type: 'radio',
    options: {
      options: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ]
    }
  },
  {
    label: '创建时间',
    prop: 'createTime',
    type: 'date',
    options: {
      type: 'datetimerange',
      defaultTime: defaultTime,
      rangeSeparator: '-',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
      valueFormat: 'YYYY-MM-DD HH:mm:ss'
    }
  }
]
// --------------------  表格  ---------------------
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<PagePackageManagementRes[]>([]) // 列表的数据
// 分页
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
// 定义选中项数量的状态
const selectedCount = ref(0)

// 处理选择变化的函数
const handleSelectionChange = (selection: any[]) => {
  selectedCount.value = selection.length // 更新选中项的数量
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await pagePackageManagement({
      ...queryParams,
      ...formRef.value?.formData
    })
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  formRef.value?.handleReset()
  handleQuery()
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await deletePackageManagement(id)
    message.success('删除成功')
    // 刷新列表
    await getList()
  } catch {}
}
/** 初始化 */
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.drink_content {
  & > span:nth-child(4) {
    &.inventory {
      color: green;
    }
    &.no_inventory {
      color: red;
    }
  }
}
/* 可选：自定义样式 */
</style>
